<template>
  <div>
    <!-- 导航栏 -->
    <div class="NAnchor_class">
      <router-link to="/cate" title="分类">分类</router-link>
        <div class="NAnchor_class_table">
          <!-- 表格 -->
          <n-data-table
            :columns="cols"
            :data="perssionData"
            :row-props="rowProps"
          />
          <n-dropdown
            placement="bottom-start"
            trigger="manual"
            :x="x"
            :y="y"
            :options="options"
            :show="showDropdown"
            :on-clickoutside="onClickoutside"
            @select="handleSelect"
          />
        </div>
    </div>

    <!-- 弹出框 -->
    <n-modal
      v-model:show="showModal"
      preset="dialog"
      title="确认"
      content="你确认?"
      positive-text="确认"
      negative-text="算了"
      @positive-click="submitCallback"
      @negative-click="cancelCallback"
    >
      <h1>测试一下</h1>
      <n-form
        ref="formRef"
        inline
        :label-width="80"
        :model="formValue"
        :rules="rules"
        :size="size"
      >
        <n-form-item label="id" path="perssion.permissionId">
          <n-input
            v-model:value="formValue.perssion.permissionId"
            placeholder="输入姓名"
          />
        </n-form-item>
        <n-form-item label="编码" path="perssion.permissionCode">
          <n-input
            v-model:value="formValue.perssion.permissionCode"
            placeholder="输入姓名"
          />
        </n-form-item>
        <n-form-item label="姓名" path="perssion.permissionName">
          <n-input
            v-model:value="formValue.perssion.permissionName"
            placeholder="输入姓名"
          />
        </n-form-item>
        <n-form-item label="url" path="perssion.url">
          <n-input
            v-model:value="formValue.perssion.url"
            placeholder="输入姓名"
          />
        </n-form-item>
      </n-form>
    </n-modal>
  </div>
</template>
<script>
import { defineComponent, h, ref, nextTick, onMounted } from "vue";
import {
  createDiscreteApi,
  NDataTable,
  NDropdown,
  NCard,
  NModal,
  NForm,
  NFormItem,
  NInput,
  NAnchor,
  NAnchorLink,
} from "naive-ui";
import { getRequest, postRequest } from "../http/request";

const perssionData = ref([]);

// 查询权限列表
onMounted(
  // getRequest(null, `sysUser/permissionQuery`).then((res) => {
  //  perssionData.value = res.data.data;
  // })
);

// 编辑弹出框
const options = [
  {
    label: "编辑",
    key: "edit",
  },
  {
    label: () => h("span", { style: { color: "red" } }, "删除"),
    key: "delete",
  },
];

export default defineComponent({
  components: {
    NDataTable,
    NDropdown,
    NCard,
    NModal,
    NForm,
    NFormItem,
    NInput,
    NAnchor,
    NAnchorLink,
  },
  setup() {
    // 表单
    const formRef = ref(null);
    const message = createDiscreteApi(["message"]).message;
    const showDropdownRef = ref(false);
    const xRef = ref(0);
    const yRef = ref(0);
    // 弹出框
    const showModal = ref(false);
    // 表单数据
    const fromPerssionData = ref({
      perssion: {
        permissionId: "",
        permissionCode: "",
        permissionName: "",
        url: "",
      },
    });
    const colsReactive = [
      {
        title: "id",
        key: "permissionId",
      },
      {
        title: "路径",
        key: "permissionCode",
      },
      {
        title: "名称",
        key: "permissionName",
      },
      {
        title: "url",
        key: "url",
      },
    ];

    return {
      // 验证
      rules: {
        user: {
          name: {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        },
      },
      // 表单
      formValue: fromPerssionData,
      //取消
      cancelCallback() {
        message.success("Cancel");
      },
      //确认
      submitCallback() {
        message.success("Submit");
      },
      // 弹出框
      showModal: showModal,
      cols: colsReactive,
      // 表单数据
      perssionData,
      options,
      showDropdown: showDropdownRef,
      x: xRef,
      y: yRef,
      handleSelect() {
        showDropdownRef.value = false;
      },
      onClickoutside() {
        showDropdownRef.value = false;
      },
      rowProps: (row) => {
        return {
          onContextmenu: (e) => {
            // 弹出框数据
            message.info(JSON.stringify(row, null, 2));
            // 弹出框
            fromPerssionData.value.perssion = row;
            showModal.value = true;
            e.preventDefault();
            showDropdownRef.value = false;
            nextTick().then(() => {
              showDropdownRef.value = true;
              xRef.value = e.clientX;
              yRef.value = e.clientY;
            });
          },
        };
      },
    };
  },
});
</script>

<style>
.NAnchor_class {
  height: 200px;
  width: 1000px;
  display: flex;
}
.NAnchor_class_1 {
  width: 100px;
  height: 100px;
  margin-right: auto;
  float: left;
}
.NAnchor_class_table {
  width: 500px;
  height: 100px;
  float: left;
}
</style>

